<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <div class="top_header">
        <div class="top_text">
          {{ sitetext }}
        </div>
        <div class="top_but">
          <el-button size="small" class="top_button" type="primary" @click="submitForm">
            {{ addsubmit }}
          </el-button>
          <el-button v-if="id_flag" size="small" type="success" @click="add_img">添加图片</el-button>
        </div>
      </div>
      <!--<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>-->
      <!--</sticky>-->
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
                标题
              </MDinput>
            </el-form-item>
            <div class="postInfo-container">
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" prop="author" label="作者:" class="postInfo-container-item">
                    <el-input v-model="postForm.author" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label-width="80px" prop="rating" label="重要性:" class="postInfo-container-item">
                    <el-rate
                      v-model="postForm.rating"
                      :max="5"
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                      :low-threshold="1"
                      :high-threshold="5"
                      style="margin-top:8px;"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
          <el-input
            v-model="postForm.summary"
            :rows="1"
            type="textarea"
            class="article-textarea"
            autosize
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item prop="body" style="margin-bottom: 30px;">
          <Articles ref="editor" v-model="postForm.body" :height="400" />
        </el-form-item>
      </div>
    </el-form>
    <el-dialog :title="'添加'+sitetext+'图片'" width="70%" :visible.sync="dialogTableVisible">
      <el-form :label-position="labelPosition" label-width="100px">
        <el-form-item :label="sitetext+'图片'">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :before-remove="handleRemove"
            name="image"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Articles from '@/components/article'
import MDinput from '@/components/MDinput'
import { validURL } from '@/utils/validate'
import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
import {
  mapGetters
} from 'vuex'

export default {
  name: 'ArticleDetail',
  components: { mapGetters, Articles, MDinput, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addsubmit: '',
      id_flag: false,
      IDther: '',
      fileList: [],
      labelPosition: 'right',
      dialogTableVisible: false,
      sitetext: '',
      postForm: {
        title: '', // 文章题目
        author: '', // 作者
        body: '', // 文章内容
        summary: '', // 文章摘要
        rating: 0,
        type: ''
      },
      loading: false,
      userListOptions: [],
      rules: {
        title: [{ required: true, message: '请添加标题', trigger: 'blur' }],
        author: [{ required: true, message: '请添加作者', trigger: 'blur' }],
        body: [{ required: true, message: '请添加内容', trigger: 'blur' }],
        rating: [{ required: true, message: '请添加重要性', trigger: 'blur' }]
      },
      tempRoute: {}
    }
  },
  computed: {
    ...mapGetters([
      'Getsiteflag',
      'qiyeenterprise'
    ])
  },
  created() {
    if (this.Getsiteflag != '') {
      this.id_flag = false
      this.addsubmit = '发布'
      this.postForm.type = this.Getsiteflag
      // type 1公告 2咨询 3电商政策 4关于我们
      switch (this.Getsiteflag) {
        case '1':
          this.sitetext = '公告'
          break
        case '2':
          this.sitetext = '电商咨询'
          break
        case '3':
          this.sitetext = '电商政策'
          break
        case '4':
          this.sitetext = '关于我们'
          break
      }
    }

    if (this.qiyeenterprise.id) { // 修改
      this.GET_IMG()
      this.id_flag = true
      this.addsubmit = '修改'
      this.postForm = this.qiyeenterprise
      this.postForm = {
        title: this.qiyeenterprise.title, // 文章题目
        author: this.qiyeenterprise.author, // 作者
        body: this.qiyeenterprise.body, // 文章内容
        summary: this.qiyeenterprise.summary, // 文章摘要
        rating: this.qiyeenterprise.rating * 1,
        type: this.qiyeenterprise.type,
        id: this.qiyeenterprise.id
      }
    }
  },
  methods: {
    add_img() { // 添加图片
      this.dialogTableVisible = true
    },
    handleRemove(file, fileList) { // 证书删除
      if (file && file.status === 'success') {
        this.$imgFn.seend({ 'pathimg': fileList[0].url.slice(28) }).deleteimg(
          (ref) => {
            if (ref.status == 200) {
              if (ref.data.code == 200) {
                this.$notify({
                  title: ref.data.Massage,
                  type: 'success'
                })
                this.fileList = fileList
              }
            }
          }, (res) => {
          })
      }

      // deleteimg
    },
    beforeUpload(file) { // 证书图片上传
      if (this.$oneselfFn.IMAGEVAL(file)) {
        this.$imgFn.seend({
          'path': this.$ENV.TRACING + this.$ENV.CONTENTGUANLI + this.IDther + this.$ENV.CONTENTHOME,
          file
        }).addimg(
          (ref) => {
            if (ref.status == 200) {
              this.fileList.push({
                name: file.name,
                url: ref.data.imageURL + '/' + ref.data.imagePath
              })
            }
          }, (res) => {
          })
      } else {
        this.$notify({
          title: '警告',
          message: '图片大小不能超过2M',
          type: 'warning'
        })
      }
      return false
    },

    submitForm() { // 发布
      this.loading = true
      this.$refs.postForm.validate(valid => {
        if (valid) {
          switch (this.addsubmit) {
            case '发布':
              this.Release_()
              break
            case '修改':
              this.modify_()
              break
          }
        } else {
          return false
        }
      })
    },
    Release_() { // 发布
      this.$apifn.AddNew(this.postForm).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.IDther = ref.data.Response.data.id
          this.dialogTableVisible = true
        }
      }).catch((res) => {
      })
      this.loading = false
    },
    modify_() { // 修改
      const data = {
        'id': this.postForm.id,
        'update': this.postForm
      }
      this.$apifn.EditNew(data).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      }).catch((res) => {
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
    },
    getRemoteUserList(query) {

      // userSearch(query).then(response => {
      //   if (!response.data.items) return
      //   this.userListOptions = response.data.items.map(v => v.name)
      // })

    },
    GET_IMG() { // 获取所有图片
      this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.CONTENTGUANLI + this.qiyeenterprise.id + this.$ENV.CONTENTHOME }).select(
        (ref) => {
          if (ref.status == 200) {
            const data = this.$oneselfFn.ImageHandlefunction(ref.data)
            // console.log(data);
            if (data != {}) {
              if (data.contenthome) {
                data.contenthome.forEach((item, key) => {
                  this.fileList.push({
                    'name': key + 1,
                    'url': item
                  })
                })
              }
            }
          }
        }, (res) => {
          // console.log(res)
        }
      )
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .top_header {
    width: 100%;
    height: 50px;
    background: #a1afbd;
    flex: index;
  }

  .top_text {
    width: 79%;
    height: 100%;
    line-height: 50px;
    text-indent: 28px;
    color: white;
    font-size: 18px;
    float: left;
  }

  .top_but {
    width: 20%;
    height: 100%;
    float: left;
    padding-top: 8px;
  }

  .top_button {
  }

  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>
